<template>
	<view class="company-address">
		<view class="header">
			<!-- 返回按钮 -->
			<view style="z-index: 1;color: #F9F9F9">
				<tn-button style="width: 35px; height: 35px;font-size: 25px" :plain="true" :border="false"
					@click="handleReturn">
					<text class="tn-icon-left"></text>
				</tn-button>
			</view>

			<view class="page-title">公司地址</view>
			
			<!-- 新增按钮 -->
			<view class="add-btn">
				<tn-button @click="handleAdd" backgroundColor="tn-bg-primary">
					<text class="tn-icon-add"></text>新增地址
				</tn-button>
			</view>
		</view>

		<!-- 地址列表 -->
		<view class="address-list">
			<view class="address-item" v-for="(address, index) in addressList" :key="index" 
				@click="handleItemClick(address)">
				<view class="address-info">
					<view class="name-tel">
						<text class="name">{{address.name}}</text>
						<text class="tel">{{address.tel}}</text>
					</view>
					<view class="address-detail">
						{{address.province}}-{{address.city}}-{{address.county}} {{address.addressDetail}}
					</view>
				</view>
				<view class="address-actions" v-if="!isSelectMode">
					<tn-button @click="handleEditClick($event, address)" backgroundColor="tn-bg-blue" size="sm">
						编辑
					</tn-button>
					<tn-button @click="handleDeleteClick($event, address.id)" backgroundColor="tn-bg-red" size="sm" style="margin-left: 10px;">
						删除
					</tn-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				user: uni.getStorageSync("userInfo"),
				isSelectMode: false
			}
		},
		onLoad(options) {
			this.isSelectMode = options.select === 'true'
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			// 获取地址列表
			getAddressList() {
				uni.request({
					url: this.baseUrl + "/wx/address/list",
					method: "GET",
					data: {
						userId: this.user.id
					},
					success: (res) => {
						if(res.data.errno === 0) {
							this.addressList = res.data.data.list
						}
					},
					fail: (err) => {
						console.error('获取地址列表失败：', err)
						uni.showToast({
							title: '获取地址列表失败',
							icon: 'none'
						})
					}
				})
			},
			
			// 返回上一页
			handleReturn() {
				uni.navigateBack()
			},
			
			// 新增地址
			handleAdd() {
				uni.navigateTo({
					url: '/pages/setUp/subpage/AddressEdit?type=add'
				})
			},
			
			// 编辑地址
			handleEdit(address) {
				uni.navigateTo({
					url: `/pages/setUp/subpage/AddressEdit?type=edit&id=${address.id}`
				})
			},
			
			// 删除地址
			handleDelete(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个地址吗？',
					success: (res) => {
						if(res.confirm) {
							uni.request({
								url: this.baseUrl + "/wx/address/delete",
								method: "POST",
								header: {
									'Content-Type': 'application/json'
								},
								data: {
									id: id
								},
								success: (res) => {
									if(res.data.errno === 0) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										})
										this.getAddressList()
									} else {
										uni.showToast({
											title: '删除失败',
											icon: 'none'
										})
									}
								}
							})
						}
					}
				})
			},
			
			// 添加选择地址方法
			handleSelect(address) {
				if (!this.isSelectMode) return
				
				// 将选择的地址存储到本地
				uni.setStorageSync('selectedAddress', address)
				// 返回上一页
				uni.navigateBack()
			},
			
			// 处理整个地址项的点击
			handleItemClick(address) {
				if (this.isSelectMode) {
					this.handleSelect(address)
				}
			},
			
			// 处理编辑按钮点击
			handleEditClick(event, address) {
				// 阻止事件冒泡
				event && event.preventDefault && event.preventDefault()
				event && event.stopPropagation && event.stopPropagation()
				
				this.handleEdit(address)
			},
			
			// 处理删除按钮点击
			handleDeleteClick(event, id) {
				// 阻止事件冒泡
				event && event.preventDefault && event.preventDefault()
				event && event.stopPropagation && event.stopPropagation()
				
				this.handleDelete(id)
			}
		}
	}
</script>

<style scoped>
	* {
		font-family: "宋体", SimSun, sans-serif;
	}

	.company-address {
		padding: 20px;
		background-color: #f9f9f9;
		/* 背景色 */
		height: 100%;
	}

	.header {
		display: flex;
		position: relative;
		align-items: center;
		justify-content: space-between;
		padding: 5px 0;
		height: 45px;
	}

	.page-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24px;
	}

	.add-btn {
		margin-left: auto;
	}

	.address-list {
		margin-top: 20px;
	}

	.address-item {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	}

	.address-info {
		margin-bottom: 10px;
	}

	.name-tel {
		margin-bottom: 5px;
	}

	.name {
		font-weight: bold;
		margin-right: 15px;
	}

	.tel {
		color: #666;
	}

	.address-detail {
		color: #333;
		line-height: 1.4;
	}

	.address-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}

	/* 选择模式下的样式 */
	.address-item.selectable {
		cursor: pointer;
	}
	
	.address-item.selectable:hover {
		background-color: #f0f0f0;
	}
</style>